<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Aizen
  Date: 2021/12/3
  Time: 10:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>花礼网后台管理系统-商品列表</title>
    <base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="css/Top.css">
    <link rel="stylesheet" href="css/Left.css">
    <link rel="stylesheet" href="css/commodityList.css">
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
    </style>
</head>
<body>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-2 stick"><%@include file="Left.jsp"%></div>
        <div class="col-md-10 col-md-offset-2"><%@include file="Top.jsp"%></div>
        <div class="col-md-10 col-md-offset-2">

            <%--            模糊查询--%>
            <form class="form-inline" action="manager/commodityListServlet" method="post">
                <div class="form-group">
                    <label for="userName">商品名称</label>
                    <input type="text" name="comname" value="${sessionScope.comname}" class="form-control" id="userName" placeholder="支持模糊查询">
                </div>
                <div class="form-group">
                    <label>类别</label>
                    <select class="form-control" name="type1">
                        <option value="">全部</option>
                        <c:forEach items="${requestScope.classList}" var="cl">
                            <c:if test="${cl.type==1}">
                                <option value="${cl.id}">${cl.name}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                    <select class="form-control" name="type2">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>价格区间</label>
                    <input type="number" name="outpriceMin" value="${sessionScope.outpriceMin}" class="form-control" style="width:100px" placeholder="最小价格"> -
                    <input type="number" name="outpriceMax" value="${sessionScope.outpriceMax}" class="form-control"style="width: 100px" placeholder="最大价格">
                </div>
                <button type="submit" class="btn btn-primary">查询</button>
                <a href="manager/commodityAddServlet.shtml?pageNo=${requestScope.goodsByPage.pageNum}"><button type="button" class="btn btn-success">新增商品</button></a>
            </form>


            <%--查询的商品数据--%>
            <div class="box">
                <table class="table table-hover">
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>已售数量</th>
                    <th>售价</th>
                    <th>库存</th>
                    <th colspan="2">操作</th>
                    <c:forEach items="${requestScope.goodsByPage.list}" var="g">
                        <tr class="datarow">
                            <td>${g.id}</td>
                            <td>${g.comname}</td>
                            <td>${g.outnum}</td>
                            <td>${g.outprice}</td>
                            <td>${g.stockd}</td>
                            <td flag="fff">
                                <a href="manager/updateCommodityServlet.shtml?cid=${g.id}&pageNo=${requestScope.goodsByPage.pageNum}"><button type="button" class="btn btn-info">修改</button></a>
                                <a href="manager/commodityDeleteServlet.shtml?cid=${g.id}&pageNo=${requestScope.goodsByPage.pageNum}" onclick="return confirm('确定删除吗？')"><button type="button" class="btn btn-danger">删除</button></a>
                            </td>
                        </tr>
                        <td colspan="7" class="hd" hidden="">
                            <div class="hdbox">
                                <div class="hdboxrow"><label>描述</label><span>${g.content}</span><br></div>
                                <div class="hdboxrow"><label>市场价</label><span>${g.marketprice}</span><br></div>
                                <div class="hdboxrow"><label>材料</label><span>${g.materialscience}</span><br></div>
                                <div class="hdboxrow"><label>包装</label><span>${g.packing}</span><br></div>
                                <div class="hdboxrow"><label>配送说明</label><span>${g.distribution}</span><br></div>
                                <div class="hdboxrow">
                                    <label>商品图片</label>
                                    <c:forEach items="${g.comImages}" var="img">
                                        <img src="image/commodity/${img}" alt="" height="100px">
                                    </c:forEach>
                                    <br></div>
                                <div class="hdboxrow">
                                    <label>详情图片</label>
                                    <c:forEach items="${g.detailsImage}" var="img2">
                                        <img src="image/commodity/${img2}" alt="" height="100px">
                                    </c:forEach>
                                    <br></div>
                                <div class="hdboxrow"><label>类别</label><span>${g.className}</span><br></div>
                            </div>
                        </td>
                    </c:forEach>
                </table>
            </div>
            <%--分页数据--%>
            <div class="box">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <c:set var="p" value="${requestScope.goodsByPage}"></c:set>
                        <li>
                            <a href="manager/commodityListServlet?pageNo=${p.prePage<1?1:p.prePage}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="manager/commodityListServlet?pageNo=1">首页</a></li>
                        <c:forEach items="${requestScope.goodsByPage.navigatepageNums}" var="i">
                            <c:if test="${i==requestScope.goodsByPage.pageNum}" var="f">
                                <li class="active"><a href="manager/commodityListServlet?pageNo=${i}">${i}</a></li>
                            </c:if>
                            <c:if test="${!f}">
                                <li><a href="manager/commodityListServlet?pageNo=${i}&outpriceMin=${sessionScope.outpriceMin}&outpriceMax=${sessionScope.outpriceMax}">${i}</a></li>
                            </c:if>
                        </c:forEach>
                        <li><a href="manager/commodityListServlet?pageNo=${p.pages}">末页</a></li>
                        <li>
                            <a href="manager/commodityListServlet?pageNo=${p.nextPage==0?p.pages:p.nextPage}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        共${p.total}条数据，共${p.pages}页
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function (){
        //左侧用户列表变红
        $("#ul li:nth-child(3) a").css("color","red");
        $("#let").html("商品列表");

        //点击展示商品详情
        $(".datarow").bind("click",function (){
            $(this).next("tr").children("td").toggle();
        })

        //点击删除和修改的时候去掉下拉显示的样式
        $("[flag='fff']").click(function(){
            $(".datarow").unbind("click");
        });


        //一级菜单下拉框的改变事件
        $("[name='type1']").change(function (){
            let classId = $(this).val();//获取到选择的类别编号
            let type = $(this).attr("name");//获取到选择的类别类型
            //发送请求到AjaxServlet 参数：类别编号&类别类型 返回：所有类别的list集合
            $.post("manager/commodityClassAjaxServlet",{classId,type},function (result){
                if(result=="true"){//如果下拉框选择的全部，则二级菜单清空内容
                    $("[name='type2']").empty().append('<option value="">全部</option>');
                    return false;
                }
                //如果选择的某个一级菜单 二级菜单展示到二级下拉框
                let rs = JSON.parse(result);
                $("[name='type2']").empty().append('<option value="">全部</option>');
                $(rs).each(function (i,e){
                    $("[name='type2']").append(
                        "<option value="+e.id+">"+e.name+"</option>"
                    );
                });
            });
        });

        //二级菜单下拉框改变事件
        $("[name='type2']").change(function (){
            //获取到二级菜单的类别编号和类型发送请求到AjaxServlet(只是发送 用来判断)
            let classId = $(this).val();
            let type = $(this).attr("name");
            $.post("manager/commodityClassAjaxServlet",{classId,type},function (){});
        });

        //获取作用域中的模糊查询条件
        $("[name='type1']").val(${sessionScope.type1classId})

        //当页面加载完成 要根据一级菜单的classID再次异步查询二级菜单
         let type1ClassId = $("[name='type1']").val();
         $.post("manager/getType2ClassIDServlet",{type1ClassId},function (result){
             if(result==""){
                 console.log("空")
                 $("[name='type2']").empty().append('<option value="">全部</option>');
                 return false;
             }
             let rs = JSON.parse(result);
             $("[name='type2']").empty().append('<option value="">全部</option>');
             $(rs).each(function (i,e){
                 $("[name='type2']").append(
                     "<option value="+e.id+">"+e.name+"</option>"
                 );
             });

             $("[name='type2']").val(${sessionScope.type2classId});

         });


    })
</script>

</html>
